<!-- 库存表 -->
<template>
    <div>
        <!-- 更多筛选条件 -->
        <div class="other-search-form is-active">
            <el-form label-position="left" :inline="true" size="small">
                <div class="flex align-items-center">
                    <!-- 时间筛选 -->
                    <timeChangeList v-model="timeType" @input="getList" @change="changeTime"></timeChangeList>
                </div>
            </el-form>
        </div>

        <div class="admin-statistics-content">
            <div class="item e-flex-1">
                <label>回收重量</label>
                <div class="e-m-t-10"><span class="num">{{ summary.weight }}</span><small>KG</small></div>
            </div>
            <div class="item e-flex-1">
                <label>回收数量</label>
                <div class="e-m-t-10"><span class="num">{{ summary.quantity }}</span><small>件</small></div>
            </div>
            <div class="item e-flex-1">
                <label>回收金额</label>
                <div class="e-m-t-10"><span class="num">{{ summary.amount }}</span><small>元</small></div>
            </div>
            <div class="item e-flex-1">
                <label>预估出售金额</label>
                <div class="e-m-t-10"><span class="num">{{ summary.sellamount }}</span><small>元</small></div>
            </div>
            <div class="item e-flex-1">
                <label>预估出售毛利</label>
                <div class="e-m-t-10"><span class="num">{{ summary.profit }}</span><small>元</small></div>
            </div>
            <div class="item e-flex-1">
                <label>预估出售毛利率</label>
                <div class="e-m-t-10"><span class="num">{{ summary.profitratio }}</span><small>%</small></div>
            </div>
        </div>
        <div class="e-m-t-20">
            <el-button @click="downloadwithdrawa()" type="primary" plain><i class="iconfont icon-excel"></i>导出Excel</el-button>
        </div>
        <el-table ref="multipleTable" tooltip-effect="dark" :data="tableData" :span-method="objectSpanMethod" stripe
            border style="width: 100%; margin-top: 20px">
            <el-table-column label="品类" header-align="center">
                <el-table-column prop="large" label="类型">
                </el-table-column>
                <el-table-column prop="name" label="可回收物">
                    <template slot-scope="scope">
                        <span>{{ scope.row.name }}{{ scope.row.isweighing ? '' : '（按件）' }}</span>
                    </template>
                </el-table-column>
            </el-table-column>
            <el-table-column label="回收数量" header-align="center">
                <el-table-column prop="number" label="回收数">
                    <template slot-scope="scope">
                        <span>{{ scope.row.number }}{{ scope.row.isweighing ? 'KG' : '件' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="小计">
                    <template slot-scope="scope">
                        <span v-if="scope.row.subtotalweight > 0" class="e-p-r-15">{{ scope.row.subtotalweight}}KG</span>
                        <span v-if="scope.row.subtotalquantity > 0">{{ scope.row.subtotalquantity}}件</span>
                    </template>
                </el-table-column>
            </el-table-column>
            <el-table-column label="回收金额" header-align="center">
                <el-table-column prop="price" label="均价">
                    <template slot-scope="scope">
                        <span>{{ scope.row.price }}元/{{ scope.row.isweighing ? 'KG' : '件' }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="amount" label="金额">
                    <template slot-scope="scope">
                        <span>{{ scope.row.amount }}元</span>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="小计">
                    <template slot-scope="scope">
                        <span>{{scope.row.subtotalamount}}元</span>
                    </template>
                </el-table-column>
            </el-table-column>
            <el-table-column label="预售金额" header-align="center">
                <el-table-column prop="price" label="单价">
                    <template slot-scope="scope">
                        <span>{{ scope.row.sellprice }}元/{{ scope.row.isweighing ? 'KG' : '件' }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="sellamount" label="金额">
                    <template slot-scope="scope">
                        <span>{{ scope.row.sellamount }}元</span>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="小计">
                    <template slot-scope="scope">
                        <span>{{scope.row.subtotalsellamount}}元</span>
                    </template>
                </el-table-column>
            </el-table-column>
            <el-table-column label="预售毛利" header-align="center">
                <el-table-column prop="profit" label="毛利">
                    <template slot-scope="scope">
                        <span>{{ scope.row.profit }}元</span>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="小计">
                    <template slot-scope="scope">
                        <span>{{scope.row.subtotalprofit}}元</span>
                    </template>
                </el-table-column>
            </el-table-column>
            <el-table-column label="预售毛利率" header-align="center">
                <el-table-column prop="profitratio" label="毛利率">
                    <template slot-scope="scope">
                        <span>{{ scope.row.profitratio }}%</span>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="小计">
                    <template slot-scope="scope">
                        <span>{{scope.row.subtotalprofitratio}}%</span>
                    </template>
                </el-table-column>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import timeChangeList from '@/components/form-select-type/timeChangeList.vue'
export default {
    components: {
        timeChangeList
    },
    props: {
        franchiseId: {
            type: Number,
            default: 0
        },
        brotherId:{
            type: [Number, String],
            default: 0
        }
    },
    data() {
        return {
            loading: false,
            tableData: [],
            // 时间类型`
            timeType: 3, //筛选时间类别：0全部，1今日，2昨日，3本月，4上月，5本季度，6上季度，7本年，9自定义时间段
            startDate: '', //开始时间
            endDate: '', //结束时间
            summary: {
                weight: 0,//回收重量
                quantity: 0,//回收件数
                amount: 0,//回收金额
                sellamount: 0,//预估出售金额
                profit: 0,//预估出售毛利
                profitratio: 0,//预估出售毛利率
            }
        };
    },
    watch: {
        
    },
    mounted() {
        this.getList()
    },
    methods: {
        // 选择时间
        changeTime(e) {
            console.log(e)
            this.startDate = e['startDate']
            this.endDate = e['endDate']
            this.timeType = e['timeType']
            this.getList()
        },
        objectSpanMethod({
            row,
            column,
            rowIndex,
            columnIndex
        }) {
            // console.log(rowIndex, columnIndex,'ssss')
            // console.log(row, 'aaaaa')

            if (columnIndex < 1 || column.label === '小计') {
                const currentLarge = row.large;
                // 只有在组内第一行才返回合并行数，其余行返回[0,0]
                if (rowIndex === 0 || this.tableData[rowIndex - 1].large !== currentLarge) {
                    // 计算从当前行开始，连续相同large的行数
                    let rowspan = 1;
                    for (let i = rowIndex + 1; i < this.tableData.length; i++) {
                        if (this.tableData[i].large === currentLarge) {
                            rowspan++;
                        } else {
                            break;
                        }
                    }
                    return [rowspan, 1];
                } else {
                    return [0, 0];
                }
            }
            return [1, 1]; // 其他列不合并
        },
        flattenData(data, level = 0, parentPath = []) {
            let result = [];
            data.forEach(item => {
                const currentPath = [...parentPath, item];
                item.product.forEach(product => {
                    result.push({
                        id: product.id,
                        name: product.name,
                        isweighing: product.isweighing,
                        price: product.price,
                        amount: product.amount,
                        weight: product.weight,
                        quantity: product.quantity,
                        sellprice: product.sellprice,
                        sellamount: product.sellamount,
                        profit: product.profit,
                        profitratio: product.profitratio,
                        number: product.isweighing?product.weight:product.quantity,
                        large: item.name,
                        bigid: item.id,
                        level: level,
                        isCategory: true,
                        subtotalweight: item.weight,
                        subtotalquantity: item.quantity,
                        subtotalamount: item.amount,
                        subtotalsellamount: item.sellamount,
                        subtotalprofit: item.profit,
                        subtotalprofitratio: item.profitratio,
                    });
                })
                // 递归处理子类型
                if (item.type && item.type.length > 0) {
                    // console.log(currentPath)
                    const childData = this.flattenData(item.type, level + 1, currentPath);
                    console.log('递归处理子类型-childData:', childData)
                    childData.forEach((cell) => {
                        result = result.concat([{
                            id: cell.id,
                            name: `${cell.large}-${cell.name}`,
                            // name: this.getSubCategoryName(currentPath),
                            isweighing: cell.isweighing,
                            price: cell.price,
                            amount: cell.amount,
                            weight: cell.weight,
                            quantity: cell.quantity,
                            sellprice: cell.sellprice,
                            sellamount: cell.sellamount,
                            profit: cell.profit,
                            profitratio: cell.profitratio,
                            number: cell.isweighing?cell.weight:cell.quantity,
                            large: currentPath[0].name,
                            bigid: currentPath[0].id,
                            level: cell.level,
                            isCategory: cell.isCategory,
                        }]);
                    })

                }
            })
            return result;
        },
        getList() {
            this.tableData = []
            this.$axios.post(`/Statistics/Recycle/Online`, {
                timeType: this.timeType,
                startDate: this.startDate,
                endDate: this.endDate,
                franchiseId: this.franchiseId || 0,
                brotherId: this.brotherId || 0
            }).then(res => {
                this.tableData = this.flattenData(res.type).filter((item)=>item.number > 0)
                console.log('tableData',this.tableData)
                this.summary.weight = res.weight
                this.summary.quantity = res.quantity
                this.summary.amount = res.amount
                this.summary.sellamount = res.sellamount
                this.summary.profit = res.profit
                this.summary.profitratio = res.profitratio
                console.log(this.tableData)
                this.loading = false

            })
        },
        // 下载
        downloadwithdrawa() {
            this.$axios.post('/Statistics/Recycle/OnlineDownload', {
                timeType: this.timeType,
                startDate: this.startDate,
                endDate: this.endDate,
                franchiseId: this.innerfranchiseid || 0,
                brotherId: this.brotherId || 0
            }, {
                responseType: 'blob'
            }).then(res => {
                console.log(res)
                let content = res;
                let fileName = '线上回收统计表.xls'
                this.utils.saveAndExport(content, fileName)
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    .admin-statistics-content {
        display: flex;
        background-color: #fff;
        padding: 15px;
        height: calc(100% - 30px);
        border: 1px solid var(--light);

        .item {
            &+.item {
                border-left: 1px solid var(--light);
                padding-left: 30px;
            }

            .icon {
                width: 44px;
                height: 44px;
                border-radius: 50%;
                border: 1px solid var(--light);
                background-color: #f2f3f5;
                padding: 5px;
                margin: 0 20px 0 0;
                box-shadow: 3px 2px 11px 0 rgb(70 70 70 / 22%);
            }

            label {
                color: var(--grey);
                font-size: 12px;
                margin-bottom: 5px;
                display: block;
            }

            .num {
                font-size: 30px;
            }
        }
    }
</style>